<template>
   <common-layout>
		<div v-show="loginResult">用户名或密码错误，请程序登录</div>
        <!-- 思考一个问题，我们将LoginForm独立成组件，为什么不在其中直接使用submit而是将submit改由index.vue传递呢？ -->
		<login-form v-bind:login-submit="handleSubmit" />
	</common-layout>
</template>

<script>
import CommonLayout from '@/layouts/CommonLayout.vue'
import LoginForm from "./LoginForm.vue"
import Cookies from 'js-cookie'
export default {
    name:"login",
    data(){
        return {
            msg:"login",	
            loginResult:false
        }
    },
    methods:{
        handleSubmit(user){  //参数由子组件反向注入，子组件可以直接执行这个函数，也可以$emit
            this.$axios({
                method:"post",
                url:"http://localhost:8094/user/login",
                data:{
                    username:"admin",
                    password:"123456"
                }
            }).then((response)=>{                
                /**
                 * 今天我是没有时间写出token服务端验证啦，按照axios的标准写法，登录后需要将登录信息写入状态管理和本地localStorage，
                 *      并且设置请求头，这种设置方法写的最好的就是ant design vue admin
                 */
                //console.log(response);return;
                if(response.status===200){
                    const {
                       username,realName,token
                    }=response.data.user;
                    Cookies.set('Access-Token', token,{ 
                        expires: 1                    
                    });
                    this.$store.commit('setUser', {
                        username,realName,token
                    });
					this.$router.push("/home/index");                   
                }else{
                    console.error("登录失败")
                }
                /**
                 * 1、js-cookie第三个参数默认只支持天作为单位，如果要改为小时需要你自己处理；
                 * 2、设置好以后axios如何使用呢？下面的是一个demo，他来自ant design vue admin中的代码，但那里写的更加优雅；
                 * 3、如果使用fetch如何解决呢？
                 *      fetch使用自定义头部，与cookie没有直接关系，不能使用Cookie的自动失效机制，因此如果你使用fetch通常做法是设置数据时同时存储时间，
                 *      获取时同时获取当前时间比较两个时间差值与你业务修改实现有效期判断。
                 * 4、setUser同lang放在根state中从而不需要带命名空间使用commit，但是我这里直接使用$store有点不太优雅，应该使用mapActions,
                 *      这种视图中直接在methods中展开方法，就好像本地支持这个方法一样。
                 * 5、编程式导航相当于声明式导航，支持函数重载，如果只有一个参数String则他是path
                 */
              
                // this.$axios({
                // 	method:"post",
                // 	url:"http://localhost:8094/point/getAllPoints?tableName=yuntu_orgdt_beijing_user_heat_map_info",
                // 	withCredentials: true,    
                // 	xsrfCookieName: 'Access-Token',   
                // 	xsrfHeaderName:"Access-Token"   
                // }).then((response)=>{
                // 	console.log(response);
                // });
            });
        }
    },
	components:{
		CommonLayout,
        LoginForm
	}
}
</script>
<style lang="scss" scoped>
    
</style>